﻿<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>登录界面</title>
    <link rel="stylesheet" href="css/index.css">
    <script type="text/javascript" src="js/jquery.js"></script>
    <style>
        .invalid {
            border: 1px solid red;
        }
        .error-message {
            color: red;
            font-size: 12px;
            margin-top: 5px;
            display: none;
            content: "⚠ ";
            text-align: right;
        }
    </style>
</head>
<body>
<script>
    window.onload=function (){
        $(document).ready(function () {
            var whei = $(window).width()
            $("html").css({ fontSize: whei / 24 });
            $(window).resize(function () {
                var whei = $(window).width();
                $("html").css({ fontSize: whei / 24 })
            });
        });
        $(document).on('keyup', 'input[name="password"]', function () {
            var password = $(this).val();
            var errorText = "";
            // 密码长度不能少于11位
            if (password.length < 11) {
                errorText = "密码长度不能少于11位";
                inpuflag=false;
            }
            // 密码不能全为数字或全为字母
            else if (/^\d+$/.test(password) || /^[a-zA-Z]+$/.test(password)) {
                errorText = "密码必须包含数字和字母";
                inpuflag=false;
            }
            // 密码只能包含数字、字母和下划线
            else if (!/^[a-zA-Z0-9_]+$/.test(password)) {
                errorText = "密码只能包含数字、字母和下划线";
                inpuflag=false;
            }
            // 显示或隐藏错误提示
            if (errorText !== "") {
                $(this).addClass('invalid');
                $(this).next('.error-message').text(errorText).show();
            } else {
                $(this).removeClass('invalid');
                $(this).next('.error-message').text("").hide();
            }
        });
        var inpuflag=true;
        $(document).on('keyup', 'input[name="username"]', function () {
            var username = $(this).val();
            var errorText = "";

            // 用户名不能为中文和特殊字符
            if (/[\u4e00-\u9fa5]+/.test(username) || /[^\w]/.test(username)) {
                inpuflag=false;
                errorText = "用户名不能包含中文和特殊字符";
            }// 显示或隐藏错误提示
            if (errorText !== "") {
                inpuflag=false;
                $(this).addClass('invalid');
                $(this).next('.error-message').text("用户名和密码不能为空").show();
            } else {
                $(this).removeClass('invalid');
                $(this).next('.error-message').text("").hide();
                inpuflag=false;
            }
        });
        $(document).ready(function () {
            var whei = $(window).width()
            $("html").css({ fontSize: whei / 24 });
            $(window).resize(function () {
                var whei = $(window).width();
                $("html").css({ fontSize: whei / 24 })
            });
        });
        $(document).ready(function () {
            $('input[name="username"]').on('blur', function () {
                var username = $(this).val();
                // 发送Ajax请求
                $.ajax({
                    type: 'POST',
                    url: 'http://192.168.43.172:8080/chat/Index?username='+username,// 后端处理程序的URL
                    data: {
                        username: username
                    },
                    dataType: "json",
                    success: function (response) {
                        if (response.checkuser) {
                            $('input[name="username"]').next('.error-message').text("用户已存在").show();
                            inpuflag=false;
                            // 登录成功，进行相应操作
                            // window.location.href = 'A.html'; // 跳转到成功页面
                        } else if (!response.checkuser) {
                            inpuflag=true;
                        }
                    },
                    error: function (response) {
                        console.log("出错了");
                    }
                });
            });
            $('button.btn').on('click', function () {
                if (inpuflag) {
                    console.log(200);
                    var username = $('input[name="username"]').val();
                    var password = $('input[name="password"]').val();
                    // 发送Ajax请求
                    $.ajax({
                        type: 'POST',
                        url: 'http://192.168.43.172:8080/chat/Index?username='+username+"&password="+password,
                        data: {
                            username: username,
                            password:password
                        },
                        dataType: "json",
                        success: function (response){
                            if (response.checklogin){
                                console.log("登陆成功");
                                // window.open("https://www.baidu.com", "A", "width=500,height=400,toolbar=no,menubar=no");

                                // 创建一个新的<div>元素
                                var divElement = $("<div class='child'>"+username+"登陆成功</div>");
// 设置<div>元素的样式
                                divElement.css({
                                    // "diopacity":'0.5',
                                    "backgroundColor" :"rgba(255, 0, 0, 0.5)",
                                    "width": "15%",
                                    "height": "30px",
                                    "text-align":"center",
                                    "position": "fixed",
                                    "top": "50%",
                                    "left": "50%",
                                    "transform": "translate(-60%, -45%)"
                                });
// 在<body>标签中插入<div>元素
                                $(".content-right").append(divElement);
                                setTimeout(function() {
                                    // 从父元素中移除该标签
                                    $(".child").remove();
                                }, 2000);
                                window.open("Test/A.html");
                            }else if (!response.checklogin){
                                console.log("登录失败");
                            }
                        },
                        error:function (response){
                            console.log("请求处理失败");
                        }
                    })
                    // 发送第二个Ajax请求
                }
                else {
                    console.log("被点击了，但没干活")
                }
            });

        });
    }
</script>
<div class="main">
    <div class="header">
        <div class="header-center fl">
            <div class="header-title">
                在线交流平台
            </div>
            <div class="header-img"></div>
        </div>
        <div class="header-bottom fl"></div>
    </div>
    <div class="content">
        <div class="content-left">
        </div>
        <div class="content-right">
            <div class="right-infp">
                <div class="right-infp-name">
                    <input type="text"  name="username" placeholder="请输入用户名" maxlength="12" required="" value="Am126980" autocomplete="off">
                    <span class="error-message" style="text-align: right; "></span>
                </div>
                <div class="right-infp-name">
                    <input type="password" name="password" placeholder="请输入密码" value="12345" autocomplete="off">
                    <span class="error-message" style="text-align: right; "></span>
                </div>
                <div class="right-infp-btn">
                    <button class="btn">登录</button>
                </div>
                <a href="register.html">注册</a>
            </div>
        </div>
    </div>
</div>
</body>
</html>